<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Home</title>
<!-- Custom Theme files -->
	<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"> <!--这个css必须要有-->
<link th:href="@{/css/style_login.css}" rel="stylesheet" type="text/css" media="all"/>

<!-- Custom Theme files -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
</head>
<body>
<div class="login">
	<div class="login-top">
		<h1>微信小商城后台</h1>
		<!--/*@thymesVar id="msg" type=""*/-->
		<p style="color: red" th:text="${msg}"></p>
		<form th:action="@{/login_do}" method="post" id="login_form">
			<input type="text" name="username" placeholder="请输入用户名" required="required">
			<input type="password" name="password" placeholder="请输入密码"><br>
			<!--防水墙票据、字符串 begin-->
			<input type="hidden" value="" name="ticket" id="ticket">
			<input type="hidden" value="" name="randstr" id="randstr">
			<!--防水墙票据、字符串 end  2096471113-->
<!--			<button type="button" class="btn" id="TencentCaptcha" data-appid="1304676174" data-cbfn="callback">点击验证</button>-->
			<!--点击此元素会自动激活验证码-->
			<!--id : 元素的id(必须)-->
			<!--data-appid : AppID(必须填写你申请到的ID)-->
			<!--data-cbfn : 回调函数名(必须)-->
			<!--data-biz-state : 业务自定义透传参数(可选)-->
<!--			<button id="TencentCaptcha" data-appid="appId" data-cbfn="callback" type="button" >验证</button>-->
			<div class="forgot">
				<!--<a th:href="@{"#">忘记密码？</a>-->
<!--				<input type="submit" value="登录" >-->
				<button type="button" class="btn btn-primary" id="TencentCaptcha" data-appid="1304676174" data-cbfn="callback">登录</button>
			</div>
	    </form>
	</div>
	<div class="login-bottom">
		<h3>管理员不能 &nbsp;<a th:href="@{#}">注册</a></h3>
	</div>
</div>	
<div class="copyright">
	<p>&copy; 商品后台管理系统<a target="_blank" th:href="@{#}"></a></p>
</div>

<script>
	window.callback = function(res) {
		if (res.ret === 1) {//验证失败
			alert("未通过验证，请重新验证");
			return;
		}
		if (res.ret === 0) {//验证成功
			//这里就是给上面的2个标签赋值
			// $('#ticket').attr('value', res.ticket);//回调的票据
			// $('#randstr').attr('value', res.randstr);//回调的字符串
			alert("验证成功");
			document.getElementById('login_form').action="http://localhost:8080/login_do";
			document.getElementById('login_form').submit();
		}
		if (res.ret === 2){
			alert("用户主动关闭验证码");
		}
	}
	
	function doForm() {
		document.getElementById('login_form').action="http://localhost:8080/login_do";
		document.getElementById('login_form').submit();
	}
</script>


</body>
</html>